<template>
  <div class="select">
    <div class="result">
      根据筛选条件共查询到 {{ articles.total_count }} 条结果：
    </div>
    <el-table :data="articles.results" style="width: 100%">
      <el-table-column label="封面">
        <template slot-scope="scope">
          <img
            v-if="scope.row.cover.images[0]"
            :src="scope.row.cover.images[0]"
            alt=""
            class="article-cover"
          />
          <img v-else src="./default-cover.gif" alt="" class="article-cover" />
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题"> </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0">草稿</el-tag>
          <el-tag v-else-if="scope.row.status === 1" type="info">待审核</el-tag>
          <el-tag v-else-if="scope.row.status === 2" type="success"
            >审核成功</el-tag
          >
          <el-tag v-else-if="scope.row.status === 3" type="danger"
            >审核失败</el-tag
          >
          <el-tag v-else-if="scope.row.status === 4" type="warning"
            >已删除</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="pubdate" label="发布时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="small"
            circle
            icon="el-icon-edit"
            type="primary"
            @click="$router.push('/article')"
          ></el-button>
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="onDelectArticle(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="articles.total_count"
      class="footer"
      @current-change="onCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  props: {
    articles: {
      type: Object,
    },
  },
  methods: {
    onCurrentChange(page) {
      this.$emit("page-click", page);
    },
    onDelectArticle(articleId) {
      this.$emit('delete-article', articleId);
    },
  },
};
</script>

<style scoped>
.select {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.result {
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

.footer {
  border-top: 1px solid #eee;
  padding-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.article-cover {
  width: 100px;
  background-size: cover;
}
</style>
